<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import { useList } from "@/hooks/page";
import { fx_shop_get_all_selected_api } from "@/package/guider/api/tour_user";
import { Router } from "@/utils/router";

import PageSticky from "@/components/page/sticky.vue";
import IndexTabItem from "./components/index-tab-item.vue";
import IndexProductItem from "./components/index-product-item.vue";
import ListMore from "@/components/list/more.vue";

onLoad((options) => {
  tempData.id = options?.id;
  reloadList();
});
onPageScroll(() => (listLoadMore.value = listData.value.length > 1));
onReachBottom(() => loadMoreList());

const totalNum = ref(0);

const { listData, listStatus, listLoadMore, reloadList, loadMoreList } =
  useList({ page: 1, page_size: 10 }, (query) => {
    return fx_shop_get_all_selected_api({
      ...query,
      guider_id: tempData.id,
    }).then((resp) => {
      totalNum.value = resp.pagination.total;
      return resp;
    });
  });

const productClick = (index: number) => {
  const product = listData.value[index] as any;
  Router.navigateTo(
    product.order_type === 3
      ? `/package/study/pages/course/detail?guiderId=${tempData.id}&id=${product.id}`
      : product.order_type === 2 || product.order_type === 8
      ? `/package/mall/pages/jps/detail?id=${product.id}&guiderId=${tempData.id}`
      : `/package/mall/pages/goods/detail?id=${product.id}&guiderId=${tempData.id}`
  );
};

const tempData = { id: "" };
</script>

<template>
  <PageSticky background="#f9f9f9">
    <view class="hot-title">
      <IndexTabItem modelValue :text="`全部（${totalNum}）`" />
    </view>
  </PageSticky>

  <view class="hot-data">
    <view class="hot-data-wrapper">
      <view
        class="hot-data-item"
        v-for="(i, d) of listData"
        :key="i.id"
        @click="productClick(d)"
      >
        <IndexProductItem :info="i" />
      </view>
    </view>
    <ListMore v-if="listLoadMore" :status="listStatus" />
  </view>
</template>

<style lang="scss">
.hot-title {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding-left: 30rpx;
}

.hot-data {
  .hot-data-wrapper {
    padding-top: 10rpx;
  }

  .hot-data-item {
    position: relative;
    margin: 0 30rpx 20rpx;
  }
}
</style>